<template>
  <a-row>
    <a-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
      <teaching-bar :date="date"></teaching-bar>
    </a-col>
    <a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
      <rank-list title="各项得分" :list="rankList" :height="300"/>
    </a-col>
  </a-row>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/title.js'
import 'echarts/lib/component/markLine'
import RankList from '@/components/chart/RankList'
import TeachingBar from '@views/dashboard/gfxy/school/teaching/TeachingBar'
import { getAction } from '@api/manage'
export default {
  name: "TeachingView",
  components:{
    TeachingBar,
    'v-charts': ECharts,RankList
  },
  props: {
    date: {
      type: String,
      default: () => []
    }
  },
  data(){
    let config = {
      rotate: 90,
      align: 'left',
      verticalAlign: 'middle',
      position: 'insideBottom',
      distance: 15
    }
    let labelOption = {
      show: true,
      position: config.position,
      distance: config.distance,
      align: config.align,
      verticalAlign: config.verticalAlign,
      rotate: config.rotate,
      formatter: '{c}',
      fontSize: 16,
      rich: {
        name: {
        }
      }
    }

    return {
      rankList:[
        {name:'智能制造学院' , total:'220%'},
        {name:'人工智能学院' , total:'120%'},
        {name:'汽车工程学院' , total:'100%'},
        {name:'机械工程学院' , total:'90%'},
        {name:'电子信息学院' , total:'80%'},
        {name:'计算机与软件学院' , total:'80%'},
        {name:'化学工程学院' , total:'80%'},
        {name:'建筑与热能工程学院' , total:'80%'},
        {name:'经济管理学院' , total:'70%'},
        {name:'艺术与设计学院' , total:'60%'},
        {name:'基础课部' , total:'50%'},
        {name:'马克思主义学院' , total:'40%'},
        {name:'军事体育部' , total:'30%'}
      ]
    }
  },
  created() {
    console.log("created")
    this.loadData();
  },
  watch:{
    date: function (){
      this.loadData();
    }
  },
  methods: {
    loadData: function (){
      //   console.log(this.url.classTimeProportion)
      //   getAction(this.url.classTimeProportion, { date: this.date}).then((res) => {
      //     if (res.success) {
      //       console.log(res.result);
      //       this.options.series[0].data = res.result.proportions;
      //       console.log(this.options.series.data);
      //       this.options.graphic.elements[1].style.text = res.result.total;
      //       console.log(this.options);
      //     }
      //     // console.log(this.options)
      //     if(res.code===510){
      //       this.$message.warning(res.message)
      //     }
      //     this.loading = false;
      //   })
    }
  },
}
</script>

<style scoped>

</style>